.@{modalPrefixClass} {
    position: relative;

    &-mask {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        height: 100%;
        z-index: @modal-zindex;
        background-color: @fill-mask;

        &-hidden {
            display: none;
        }
    }

    &-wrap {
        position: fixed;
        overflow: auto;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        height: 100%;
        z-index: @modal-zindex;
        -webkit-overflow-scrolling: touch;
        outline: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    &-content {
        border-radius: @modal-radius;
        height: auto;
        padding-top: @modal-spacing-lg;
        position: relative;
        background-color: #fff;
        border: 0;
        background-clip: padding-box;
        text-align: center;
        height: 100%;
        overflow: hidden;
    }

    &-body {
        padding: 0 @modal-spacing-lg 20px;
    }

    &-header {
        padding: @modal-spacing-sm @modal-spacing-lg @modal-spacing-lg;
    }

    &-title {
        line-height: 1;
        font-weight: bold;
        margin: 0;
        font-size: @modal-font-size-heading;
        
        color: @modal-color-text-caption;
        text-align: center;
    }

    &-body {
        font-size: @font-size-base;
        color: @modal-color-text-caption;
        height: 100%;
        overflow: auto;
    }

}
